<template>
  <div name="shop-card">
    <!-- 商品详情 -->
    <van-popup
      @click-overlay="$emit('update:shopInfo',false)"
      :show="shopInfo"
      round
      position="bottom"
      :style="{ height: '70vh' }"
      style="z-index: 3002;overflow: unset;"
      closeable
      @click-close-icon="$emit('update:shopInfo',false)"
    >
      <div class="m-20 flex">
        <div class="imgContent mr-20">
          <div class="imgLists">
            <swiper
              :list="itemInfo.image"
              height="160px"
              style="border-radius: 10px;"
            ></swiper>
          </div>
        </div>
        <div class="shopTitles">{{ itemInfo.name }}</div>
      </div>
      <div class=" synopsis">{{ itemInfo.text }}</div>
      <div class="ml-20 mr-20">
        <van-tabs v-model:active="activeName" class="tabar">
          <van-tab title="项目详情" name="proje">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in itemInfo.projList"
                :key="index"
                icon="certificate"
                :title="item.name"
                :value="item.fate + '次'"
                :label="item.job"
              >
                <template #right-icon>
                  <span class="ml-20">{{ item.price }}元</span>
                </template>
              </van-cell>
            </van-cell-group>
          </van-tab>
          <van-tab title="购买须知" name="notice">
            <van-collapse v-model="activeNames">
              <van-collapse-item
                v-for="(item, index) in itemInfo.noticeList"
                :key="index"
                :title="item.title"
                :name="index"
              >
                <li v-for="(item2, index2) in item.children" :key="index2">
                  {{ item2.text }}
                </li>
              </van-collapse-item>
            </van-collapse>
          </van-tab>
        </van-tabs>
        <van-submit-bar
          :price="itemInfo.money * 100"
          button-text="加入购物袋"
          @submit="$emit('cus-event')"
        >
          <div>
            原价<del class="mr-5 ml-5">{{
              itemInfo.originPrice.toFixed(2)
            }}</del
            >元
          </div>
        </van-submit-bar>
      </div>
    </van-popup>
  </div>
</template>

<script>
import swiper from "@/components/Swiper";
export default {
  components: { swiper },
  props:{
    shopInfo:{
      type:Boolean,
      require:true,
    },
    itemInfo:{
      type:Array,
      require:true,
    }
  },
};
</script>

<style lang="less" scoped>
.imgContent {
  // background: brown;
  width: 120px;
  height: 60px;
  position: relative;
  .imgLists {
    position: absolute;
    width: 100%;
    height: 160px;
    top: -100px;
    left: 0;
    // background: burlywood;
    z-index: 9999;
    border-radius: 10px;
  }
}
.shopTitles {
  font-size: 18px;
}
.synopsis {
  font-size: 14px;
  color: #999;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tabar {
  height: 270px;
  overflow: hidden;
  /deep/.van-tabs__content {
    overflow-y: auto;
    height: 230px;
    .van-collapse-item {
      .van-cell {
        padding: 0;
      }
      .van-collapse-item__content {
        padding: 0 15px;
        li {
          list-style-type: unset;
        }
      }
    }
  }
}
</style>
